<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>演示移动端表单布局</title>
</head>
<style>
     /*全局盒模型 start*/
    * {
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        outline: 0;
        box-sizing: border-box;
        padding:0;
        margin:0;
    }
    /*全局盒模型 end*/
    /*此为解决苹果手机对input按钮编译不一样的问题 start*/
    input[type=button], input[type=submit], input[type=file], button { 
        cursor: pointer; -webkit-appearance: none; 
    } 
    input::-webkit-input-placeholder { /* WebKit browsers */  
        color: #999;  
    }  
    input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */  
        color: #999;  
    }  
    input::-moz-placeholder { /* Mozilla Firefox 19+ */  
        color: #999;  
    }  
    input:-ms-input-placeholder { /* Internet Explorer 10+ */  
        color: #999;  
    }
    /*此为解决苹果手机对input按钮编译不一样的问题 end*/
    body {
        color: #333;
        font-size: 13px;
        background-color: #f5f5f5;
    }
    h1, h2, h3, h4, h5, h6 {
        font-size: 100%;
        font-weight: normal;
        margin: 0;
    }
    img {
        max-width: 100%;
        border: 0;
    }
    .border-b {
        border-bottom: 1px solid #e0e0e0;
    }
    .p-rel {
        position: relative;
    }
    .p-abs-rb {
        position: absolute;
        right: 0;
        bottom: 0;
    }
    .b-s-m {
        background-color: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        margin-bottom: 0.8rem;
        overflow: hidden;
        width: 100%;
    }
    .margin-t8 {
        margin-top: 0.8rem;
    }
    .padding8 {
        padding: 0.8rem;
    }
    .padding-l8 {
        padding-left: 0.8rem;
    }
    .padding-r8 {
        padding-right: 0.8rem;
    }
    .padding-lr8 {
        padding-left: 0.8rem;
        padding-right: 0.8rem;
    }
    .wx-btn {
        display: inline-block;
        text-align: center;
        background-color: #FF6768;
        width: 100%;
        height: 2.5rem;
        line-height: 2.5rem;
        color: #fff;
        border: 0;
        border-radius: 0;
        letter-spacing: 0.25rem;
    }
    .wx-btns, .imitate-btns a {
        height: 2rem;
        line-height: 2rem;
        padding: 0px 1rem;
        display: inline-block;
        border-radius: 2rem;
        box-sizing: border-box;
        overflow: hidden;
    }
    .wx-btns {
        position: relative;
        text-align: center;
        background-color: #fff;
        vertical-align: top;
        color: #000;
        border: 1px solid #e0e0e0;
        border-radius: 0.25rem;
    }
    .theme-bgcolor {
        background-color: #0089d2;
    }
    .wx-form {
        background-color: #fff;
    }
    .wx-form.padding-l8 .wx-form-item {
        padding-left: 0;
    }
    .wx-form-item {
        position: relative;
        height: 2.5rem;
        line-height: 2.5rem;
    }
    .wx-form-item label:not(.wx-switch):not(.wx-checkbox):not(.wx-radio) {
        width: 6rem;
        position: absolute;
        text-align: left;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .wx-form-item input, .wx-form-item textarea {
        width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-appearance: none;
        border: 0;
        background: none;
        padding-left: 6rem;
        height: 1.4rem;
        line-height: 1.4rem;
    }
    .wx-form .wx-form-item:active::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(0,0,0,0.3);
        pointer-events: none;
    }
</style>
<body>
    <div class="wx-form padding-lr8 margin-t8">
        <div class="wx-form-item wx-form-item-show border-b">
            <label for="#">账号</label>
            <input type="text" maxlength="18" placeholder="请输入您的账号">
        </div>
        <div class="wx-form-item wx-form-item-show border-b">
            <label for="#">密码</label>
            <input type="password" maxlength="18" placeholder="请输入你的密码">
        </div>
        <div class="wx-form-item wx-form-item-show p-rel">
            <label for="#">手机验证码</label>
            <input type="phone" placeholder="请输入手机验证码" maxlength="6">
            <div class="p-abs-rb">
              <span class="wx-btns" style="margin-top: 0.25rem;">获取手机验证码</span>
            </div>
        </div>
    </div>
    <div class="padding8 margin-t8">
        <input type="button" class="wx-btn theme-bgcolor" value="确认">
    </div>
</body>
</html>